@extends('home.base')
@section('title')
    {{$site['title']}}
@endsection
@section('content')
@include('home.i_header')
<div id="app">
    <div class="i-banner">
        @include('home.search')
    </div>
    <div class="list_box w1200">
        <div class="left con">
            <div class="img"></div>
            <div class="list_a">
                <a href="">整租</a>
                <a href="">合租</a>
            </div>
        </div>
        <div class="mid con">
            <div class="img"></div>
            <div class="list_a">
                <a href="">整租</a>
                <a href="">合租</a>
            </div>
        </div>
        <div class="right con">
            <div class="img"></div>
            <div class="list_a">
                <a href="">整租</a>
                <a href="">合租</a>
            </div>
        </div>
    </div>
{{--    <div class="slider">--}}
{{--        <Carousel autoplay v-model="value" loop autoplay-speed="5000">--}}
{{--            <carousel-item>--}}
{{--                <div class="carousel">--}}
{{--                    <img src="/uploads/images/slider/banner01.jpg" alt="">--}}
{{--                </div>--}}
{{--            </carousel-item>--}}
{{--            <carousel-item>--}}
{{--                <div class="carousel">--}}
{{--                    <img src="/uploads/images/slider/banner02.jpg" alt="">--}}
{{--                </div>--}}
{{--            </carousel-item>--}}
{{--            <carousel-item>--}}
{{--                <div class="carousel">--}}
{{--                    <img src="/uploads/images/slider/banner03.jpg" alt="">--}}
{{--                </div>--}}
{{--            </carousel-item>--}}
{{--            <carousel-item>--}}
{{--                <div class="carousel">--}}
{{--                    <img src="/uploads/images/slider/banner04.jpg" alt="">--}}
{{--                </div>--}}
{{--            </carousel-item>--}}
{{--        </Carousel>--}}
{{--    </div>--}}

    <div class="hot">
        <div class="title">
            <img src="/static/home/images/m_left.png" alt="">
            <span>热销新房</span>
            <img src="/static/home/images/m_right.png" alt="">
        </div>
        <div class="w1200 newhouse">
{{--            @foreach($rec as $r)--}}
                <div class="list" v-for="item in hot" :key="item.id">
                    <div class="img">
                        <a :href=`/property/${item.id}`><img :src="item.thumb" :alt="item.title"></a>
                        <span>@{{ item.regionname }}</span>
                    </div>
                    <h3 class="nowrap">
                        <a :href=`/property/${item.id}`>@{{ item.title }}</a>
                    </h3>
                    <div class="price">
                        价格：<span>@{{ item.average }}</span>元/平米
                    </div>
                    <div class="expire">有效期：2019/5/1-2019/7/1</div>
                    <div class="desc">
                        <div class="area nowrap">
                            （建筑面积）101㎡-145㎡
                        </div>
                        <div class="tips tese">
{{--                            @foreach($r->featuretxt as $k=>$t)--}}
{{--                                @if($k<3)--}}
                                    <span v-for="(itemson,index) in item.featuretxt" v-if="index<3" :key="index">@{{ itemson }}</span>
{{--                                @endif--}}
{{--                            @endforeach--}}
                        </div>
                    </div>
                </div>
{{--            @endforeach--}}
        </div>
        <div class="more">
            <a :href=`/newhouse/${city_id}` target="_blank">更多热销新房</a>
        </div>
    </div>
    <div class="trend">
        <div class="w1200">
            <div class="wrap-title">
                <h3>房价走势</h3>
                <p>数说楼市，为您提供实时房价走向，让您买房不盲目/更直观。</p>
            </div>
            <div class="trend-chart">
                <div id="trendmap" style="width: 400px;height:332px;"></div>
                <div class="trend-txt">
                    <div class="top">
                        <span v-for="(item,index) in cityIndex" track-by="$index" @click="changeCity(item.id)" :key="index" :class="{active:item.id==price_city_id}">@{{ item.name }}</span>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <h4>@{{ cityName }}@{{ latestMonth }}新房均价</h4>
                            <div class="price" v-if="newPrice != 0">
                                <span>@{{ newPrice }}</span>元/㎡
                            </div>
                            <div class="price" v-else>
                                <span>---</span>
                            </div>
                        </div>
                        <div class="left">
                            <h4>@{{ cityName }}@{{ latestMonth }}二手房均价</h4>
                            <div class="price" v-if="handPrice != 0">
                                <span >@{{ handPrice }}</span>元/㎡
                            </div>
                            <div class="price" v-else>
                                <span >---</span>
                            </div>
                        </div>
                        <div class="left" style="margin-right:0;">
                            <h4>均价环比上月</h4>
                            <div class="price" :class="priceClass" v-if="rate != 0">
                                <span>@{{ rate }}</span>%
                            </div>
                            <div class="price" v-else>
                                <span style="font-size:30px;color:#666;">持平</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news">
        <div class="w1200 project">
            <div class="left">
                <div class="list">
                    <div class="title">项目动态</div>
                    <div class="con">
                        <div class="img">
                            <a :href=`/article/${city_id}/${article.dt_rec.id}` v-if="article.dt_rec" target="_blank">
                                <img :src="article.dt_rec.thumb" :alt="article.dt_rec.title">
                                <p class="nowrap">@{{ article.dt_rec.title }}</p>
                            </a>
                        </div>
                        <ul>
                            <li class="nowrap" v-for="(item,index) in article.dongtai" :key="index" v-if="article.dongtai.length">
                                <a :href=`/article/${city_id}/${item.id}` target="_blank">@{{ item.title }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="list">
                    <div class="title">好房推荐</div>
                    <div class="con">
                        <div class="img">
                            <a :href=`/article/${article.hf_rec.id}` v-if="article.hf_rec">
                                <img :src="article.hf_rec.thumb" :alt="article.hf_rec.title">
                                <p class="nowrap">@{{ article.hf_rec.title }}</p>
                            </a>
                        </div>
                        <ul>
                            <li class="nowrap" v-for="item in article.haofang" :key="item.id" v-if="article.haofang.length">
                                <a :href=`/article/${item.id}`>@{{ item.title }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title">楼市动态</div>
                <div class="img">
                    <a :href=`/article/${article.ls_rec.id}` v-if="article.ls_rec">
                        <img :src="article.ls_rec.thumb" :alt="article.ls_rec.title">
                        <p class="nowrap">@{{ article.ls_rec.title }}</p>
                    </a>
                </div>
                <ul>
                    <li class="nowrap" v-for="item in article.loushi" :key="item.id" v-if="article.loushi.length">
                        <a :href=`/article/${item.id}`>@{{ item.title }}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="w1200">
        <div class="service">
            <div class="title">
                <div class="line"></div>
                <div class="mid">一站式<span>服务</span></div>
                <div class="line"></div>
            </div>
            <div class="con">
                <a class="list" href="javascript:;">
                    <div class="icon">
                        <Icon type="ios-paper-outline"></Icon>
                    </div>
                    <div class="txt">提交购房需求</div>
                </a>
                <a class="list" href="javascript:;">
                    <div class="icon">
                        <Icon type="ios-cog-outline"></Icon>
                    </div>
                    <div class="txt">私人定制房源</div>
                </a>
                <a class="list" href="javascript:;">
                    <div class="icon">
                        <Icon type="md-contacts"></Icon>
                    </div>
                    <div class="txt">一对一购房指导</div>
                </a>
                <a class="list" href="javascript:;">
                    <div class="icon">
                        <Icon type="ios-bus-outline"></Icon>
                    </div>
                    <div class="txt">免费接送实地看房</div>
                </a>
                <a class="list" href="javascript:;">
                    <div class="icon">
                        <Icon type="ios-key-outline"></Icon>
                    </div>
                    <div class="txt">选房下定</div>
                </a>
            </div>
        </div>
    </div>
    @include('home.footer')
    <Modal v-model="modalMes" width="600">
        <div class="mestop">
            <div class="tit">
                <div><img src="/static/home/images/ico1.png" alt=""></div>
                <h3>房价动态提醒</h3>
                <div><img src="/static/home/images/ico2.png" alt=""></div>
            </div>
            <div class="desc">提交购房需求，报名成功后我们将联系您了解购房需求</div>
        </div>
        <div class="mesinput">
            <input type="text" placeholder="你的手机号">
        </div>
        <div slot="footer" style="text-align: center;padding:20px 0;">
            <i-button type="error" @click="sendMes" style="background:#333;border:none;width:400px;height:50px;" size="large" long :loading="mes_loading">立即报名</i-button>
        </div>
    </Modal>
</div>
@endsection

@section('script')
    <style>
        .ivu-slider-bar{background:#FFBC26;}
        .ivu-slider-button{border-color: #FFBC26;}
        .ivu-slider-button:hover{border-color: #FFBC26;}
        .ivu-tooltip-inner{background:rgba(255,188,38,.9);}
        .ivu-tooltip-popper[x-placement^=top] .ivu-tooltip-arrow{border-top-color:rgba(255,188,38,.9);}
        .ivu-modal-body{padding:0;}
        .ivu-modal-close .ivu-icon-ios-close{color:#fff;}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
    <script src="/static/home/js/index.js"></script>

@endsection